<template>
<!-- 预览 -->
  <div class="container">
    <div class="title">
      <h2>{{ previewList.title }}</h2>
    </div>

    <div style="margin-bottom: 20px">
      <span>{{ previewList.createTime | formatTime }}</span>
      <span> {{ previewList.username }} </span>
      <span>
        <span class="el-icon-view"></span>
        <span> {{ previewList.visits }} </span>
      </span>
    </div>

    <div class="content" v-html="previewList.articleBody"></div>
  </div>
</template>

<script>
// 引入时间组件
import dayjs from 'dayjs'
export default {
  name: 'ArticlesPreview',
  props: {
    previewList: {
      type: Object
    }
  },
  filters: {
    // 格式化入职日期的方法
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.content {
  border-top: 1px dashed #000;
  background: #f5f5f5;
  padding: 10px;
  width: 100%;
  font-size: 14px;
  line-height: 36px;
}
</style>
